<template>
	<div>
		<el-select
			v-model="newConfigItem.billingType"
			:style="billingTypeInfo.style"
			class="billing-type-select"
		>
			<el-option
				v-for="(value, key) in billingTypeInfo.types"
				:key="key"
				:label="value"
				:value="Number(key)"
			></el-option>
		</el-select>
		<!-- 固定收费 -->
		<template v-if="newConfigItem.billingType === 1">
			<el-input
				v-model="newConfigItem.amount"
				class="billing-type-input"
				:maxlength="7"
				v-input="{ name: 'float', num: '1' }"
				@blur="handleCheckFixedCharges"
			/>
			<span>{{ configItemTitle.amount }}</span>
		</template>
		<!-- 盲注倍数收费 -->
		<template v-else-if="newConfigItem.billingType === 2">
			<el-input
				v-model="newConfigItem.amount"
				class="billing-type-input"
				:maxlength="7"
				v-input="{ name: 'float', num: '1' }"
			/>
			<span>{{ subBillingTypeInfo.multipleTitle }}</span>
		</template>
		<!-- 单次行动指数递增 -->
		<template v-else-if="newConfigItem.billingType === 3">
			<span>{{ configItemTitle.start }}</span>
			<el-input
				v-model="newConfigItem.subAmount"
				class="billing-type-input"
				:maxlength="7"
				v-input="{ name: 'float', num: '1' }"
				@blur="handleCheckAmount"
			/>
			<el-select
				v-model="newConfigItem.subBillingType"
				class="sub-billing-type-select"
			>
				<el-option
					v-for="(value, key) in subBillingTypeInfo.subTypes"
					:key="key"
					:label="value"
					:value="Number(key)"
				></el-option>
			</el-select>
			<el-input
				v-model="newConfigItem.subMultipleIncrStep"
				class="billing-type-input"
				:maxlength="7"
				v-input="{ name: 'float', num: '1' }"
				@blur="handleCheckMultipleIncrStep"
			/>
			<span>{{ configItemTitle.incrStep }}，</span>
			<span>{{ configItemTitle.limit }}</span>
			<el-input
				v-model="newConfigItem.subLimitAmount"
				class="billing-type-input"
				:maxlength="7"
				v-input="{ name: 'float', num: '1' }"
				@blur="handleCheckLimitAmount"
			/>
			，
			<el-checkbox v-model="newConfigItem.subIsFirstFree">
				{{ configItemTitle.firstTimeFree }}
			</el-checkbox>
		</template>
		<!-- 底池比例收费 -->
		<template v-else-if="newConfigItem.billingType === 4">
			<el-input
				v-model="newConfigItem.amount"
				style="width: 90px;"
				:maxlength="15"
				v-input="{ name: 'float', num: '1' }"
				@blur="handleCheckPotAmount"
			/>
			<span>{{ configItemTitle.pot }}</span>
		</template>
		<!-- 互动道具或看手牌-返利 -->
		<template v-if="isInteractiveConfigType || isLookHandConfigType">
			，
			<el-input
				v-model="newConfigItem.rebate"
				class="billing-type-input"
				:maxlength="4"
				v-input="{ name: 'float', num: '1' }"
				@blur="handleCheckRebate"
			/>
			<span>{{ configItemTitle.rebate }}</span>
		</template>
	</div>
</template>

<script>
import {
	configItemTitle,
	isLookHandConfigTypeFunc,
	isInteractiveConfigTypeFunc,
	getBillingTypeInfoFunc,
	getSubBillingTypeInfoFunc
} from '../configItemDict'

export default {
	props: {
		configType: {
			type: Number,
			default: 0
		},
		configItem: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			configItemTitle,
			newConfigItem: { ...this.configItem },
			isInteractiveConfigType: isInteractiveConfigTypeFunc(
				this.configType
			),
			isLookHandConfigType: isLookHandConfigTypeFunc(this.configType),
			billingTypeInfo: getBillingTypeInfoFunc(
				this.configType,
				this.configItem.valueAddedType
			),
			subBillingTypeInfo: getSubBillingTypeInfoFunc(this.configType)
		}
	},
	watch: {
		newConfigItem: {
			handler() {
				this.$emit('updateConfigItem', this.newConfigItem)
			},
			deep: true
		}
	},
	methods: {
		// 固定收费校验
		handleCheckFixedCharges() {
			if (
				this.isLookHandConfigType &&
				Number(this.newConfigItem.amount) <= 0
			) {
				// 看手牌
				this.$message.closeAll()
				this.$message.warning('固定收费不能等于0')
				return
			}
		},
		// 看手牌-底池比例
		handleCheckPotAmount() {
			if (Number(this.newConfigItem.amount) <= 0) {
				this.$message.closeAll()
				this.$message.warning('底池比例收费不能等于0')
			}
		},
		// 看手牌-返利
		handleCheckRebate() {
			if (Number(this.newConfigItem.rebate) > 100) {
				this.$message.closeAll()
				this.$message.warning('返利不能大于100')
			}
		},
		// 普通增值类型-单次行动指数-起始值
		handleCheckAmount() {
			if (Number(this.newConfigItem.subAmount) <= 0) {
				this.$message.closeAll()
				this.$message.warning('单次行动指数递增，起始值应大于0')
			}
		},
		// 普通增值类型-单次行动指数-倍增长
		handleCheckMultipleIncrStep() {
			if (Number(this.newConfigItem.subMultipleIncrStep) <= 1) {
				this.$message.closeAll()
				this.$message.warning('单次行动指数递增，倍增长应大于1')
			}
		},
		// 普通增值类型-单次行动指数-上限值
		handleCheckLimitAmount() {
			if (
				Number(this.newConfigItem.subLimitAmount) <
				Number(this.newConfigItem.subAmount)
			) {
				this.$message.closeAll()
				this.$message.warning('上限值必须大于等于起始值')
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.billing-type-select {
	width: 160px;
}
.billing-type-input {
	width: 60px;
}
.sub-billing-type-select {
	width: 100px;
}
</style>
